<template>
  <div class="canvas-basic">
    <h1>Canvas基础</h1>
    <p>Canvas是HTML5提供的一个用于绘制图形的元素，WebGL就是基于Canvas来实现的。了解Canvas的基本使用对于学习WebGL至关重要。</p>

    <el-card class="demo-section">
      <template #header>
        <div class="card-header">
          <h3>Canvas基本操作</h3>
        </div>
      </template>
      <div class="demo-content">
        <canvas ref="demoCanvas" width="400" height="300"></canvas>
        <div class="code-example">
          <pre><code>
// 获取Canvas元素
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 清除Canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
          </code></pre>
        </div>
      </div>
    </el-card>

    <el-card class="info-section">
      <template #header>
        <div class="card-header">
          <h3>WebGL上下文</h3>
        </div>
      </template>
      <p>在WebGL中，我们需要获取WebGL上下文来进行绘制操作：</p>
      <ul>
        <li>使用 <code>canvas.getContext('webgl')</code> 获取WebGL 1.0上下文</li>
        <li>使用 <code>canvas.getContext('webgl2')</code> 获取WebGL 2.0上下文</li>
        <li>通过上下文对象可以访问WebGL的所有功能</li>
      </ul>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const demoCanvas = ref<HTMLCanvasElement | null>(null)

onMounted(() => {
  if (demoCanvas.value) {
    const gl = demoCanvas.value.getContext('webgl')
    if (gl) {
      // 设置清除颜色为黑色
      gl.clearColor(0.0, 0.0, 0.0, 1.0)
      // 清除颜色缓冲区
      gl.clear(gl.COLOR_BUFFER_BIT)
    }
  }
})
</script>

<style scoped>
.canvas-basic {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #303133;
  margin-bottom: 20px;
}

.demo-section {
  margin: 30px 0;
}

.info-section {
  margin: 30px 0;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  color: #409EFF;
}

.demo-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

canvas {
  border: 1px solid #dcdfe6;
  background-color: #000;
}

.code-example {
  flex: 1;
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

code {
  font-family: monospace;
  color: #409EFF;
  background-color: #ecf5ff;
  padding: 2px 4px;
  border-radius: 3px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
  color: #606266;
}

li {
  margin: 10px 0;
}
</style>